import React, {Component} from 'react';
import {Image, Pressable, Text, View, StyleSheet} from "react-native";
import ThButton from "../../../components/THButton";
import {pxToDp} from "../../../utils/styleKits";

// 滑块组件
import { Slider } from 'react-native-elements';

class Filter extends Component {
  constructor(props){
    super(props);
    this.state = {
      gender: '男',
      distance: 2,   // 距离
    }
  }
  render() {
    let {gender,distance} = this.state;

    let boyImg = require('../../../images/boy.png');
    let boySelImg = require('../../../images/boy-sel.png');
    let girlImg = require('../../../images/girl.png');
    let girlSelImg = require('../../../images/girl-sel.png');

    return (
      <View style={{backgroundColor: '#fff', padding: 20}}>
        {/*筛选、关闭*/}
        <View style={styles.chooseBox}>
          <Text style={styles.chooseText}>筛选</Text>
          <Pressable onPress={this.props.close.bind(this, this.state)} style={styles.closeBox}>
            <Text style={{color:'#fff'}}>X</Text>
          </Pressable>
        </View>

        <View style={styles.chooseInfoBox}>

          {/*性别*/}
          <View style={styles.boyGirlBox}>
            <Text>性别：</Text>
            <Pressable onPress={()=>{this.changeGender('男')}}>
              <Image style={styles.boyGirl} source={gender === '男' ? boySelImg : boyImg}/>
            </Pressable>
            <Pressable onPress={()=>{this.changeGender('女')}}>
              <Image style={styles.boyGirl} source={gender === '女' ? girlSelImg : girlImg}/>
            </Pressable>
          </View>


          {/*距离*/}
          <View>
            <Text>距离：{distance}km</Text>
            <Slider
              value={distance}
              onValueChange={(data)=>{this.setDistance(data)}}
              maximumValue={30}
              minimumValue={0}
              step={1}
              thumbStyle={{ height: pxToDp(20), width: pxToDp(20)}}
            />
          </View>

        </View>

        <ThButton style={styles.confirm} onPress={this.props.close.bind(this, this.state)}>确认</ThButton>

      </View>
    );
  }

  // 设置距离
  setDistance = (distance) =>{
    this.setState({distance})
  };

  // 点击改变性别
  changeGender = (gender) => {
    this.setState({
      gender
    });
  }
}

const styles = StyleSheet.create({
  // 底部弹框
  closeBox: {
    width: pxToDp(26),
    height: pxToDp(26),
    backgroundColor: '#000',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: pxToDp(15),
  },
  chooseBox: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  chooseText: {
    flex:1,
    textAlign: 'center',
    fontSize: pxToDp(20),
  },
  boyGirlBox: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: pxToDp(20),
  },
  boyGirl: {
    width: pxToDp(50),
    height: pxToDp(50),
    marginLeft: pxToDp(30),
    resizeMode: 'contain'
  },
  chooseInfoBox: {
    height: pxToDp(150),
    justifyContent: 'space-around',
  },
  confirm: {
    height: pxToDp(40),
    width: '50%',
    borderRadius: pxToDp(5),
    overflow: 'hidden',
    alignSelf: 'center',
  }
});

export default Filter;